<template>
	<view class="container">	
		<view class="prod-section">
			<view class="prod-header b-b">
				<text class="name">商品信息</text>
			</view>
			<!-- 商品列表 -->
			<view class="prod-body" v-for="(item, index) in productItemList" :key="item.id">
				<view class="prod-item">
					<image :src="item.pic"></image>
					<view class="right">
						<text class="title clamp">{{item.title}}</text>
						<text class="spec">{{item.spData}}</text>
						<view class="price-box">
							<text class="price">￥{{item.price}}</text>
							<uni-number-box class="step" :min="1" :max="100" :value="item.number" :index="index" @blur="numberBlur" @focus="numberFocus" @change="numberChange"></uni-number-box>
						</view>
					</view>
				</view>
				<view class="note-cell">
					<text class="cell-tit clamp">备注</text>
					<input class="note" type="text" v-model="item.orderNote" placeholder="请填写备注信息" placeholder-class="placeholder" />
				</view>
			</view>
		</view>
	
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price">￥{{totalAmount}}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>
	
	</view>
</template>

<script src = "./order.js"></script>

<style lang="scss" src = "./order.scss"></style>